<ngm-slider-input [label]=" 'PAC.Story.Padding' | translate: {Default: 'Padding'} " class="w-full"
    [(ngModel)]="padding"
    [min]="0"
    [max]="100"
></ngm-slider-input>
<ngm-slider-input [label]=" 'PAC.Story.BorderRadius' | translate: {Default: 'Border Radius'} " class="w-full"
    [(ngModel)]="borderRadius"
    [min]="0"
    [max]="100"
    >
</ngm-slider-input>

<pac-color-input [formControl]="backgroundColor" [label]=" 'PAC.Story.BackgroundColor' | translate: {Default: 'Bg Color'} " class="w-full my-2"></pac-color-input>

<ngm-input *ngIf="!enableBackgroundImage" class="w-full" 
    [label]=" 'PAC.Story.BackgroundImage' | translate: {Default: 'Bg.Image'} "
    [placeholder]=" 'background-image' "
    [formControl]="backgroundImage">
</ngm-input>

<div class="flex justify-start items-start gap-2 my-2">
    <label for="widget-background-color" class="w-1/3 shrink-0 block tracking-wide text-xs text-right">
        <mat-checkbox labelPosition="before" [ngModel]="enableBackgroundImage" (ngModelChange)="onBackgroundImage($event)">
            {{ 'PAC.Story.BackgroundImage' | translate: {Default: 'Bg Image'} }}
        </mat-checkbox>
    </label>

    <pac-image-upload *ngIf="enableBackgroundImage" class="w-2/3"
        [formControl]="backgroundImageObj"
        [backgroundSize]="backgroundSize.value"
        [backgroundRepeat]="backgroundRepeat.value"
    ></pac-image-upload>

</div>

<div *ngIf="enableBackgroundImage" class="p-2">
    <div class="text-xs my-2 flex justify-between items-center">
        <span>
            {{ 'PAC.Story.PresetBackgroundImages' | translate: {Default: 'Preset Background Images'} }}
        </span>

        <button (click)="togglePresetBackgroundImages()">
            <svg data-accordion-icon class="w-6 h-6 shrink-0" 
                [class.rotate-180]="!!backgroundImages?.length"
                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
    </div>

    <div class="grid grid-cols-3 gap-1 max-h-80 overflow-auto" [@listAnimation]="backgroundImages?.length">
        <div *ngFor="let bg of backgroundImages" class="pac-image-tile relative h-20 cursor-pointer bg-contain bg-no-repeat bg-center transition-colors
            m-2 rounded-lg outline outline-2 outline-offset-2 outline-transparent
            hover:bg-slate-200 dark:hover:bg-slate-800
            group"
            [class.active]="bg.backgroundImageObj.url===backgroundImageUrl"
            [style.background-image]="'url(' + bg.backgroundImageObj.url + ')'"
            (click)="onBackgroundImageSelected(bg)"
        >
            <button mat-icon-button class="pac-image-tile__copy absolute top-0 right-0 opacity-0 group-hover:opacity-100" displayDensity="compact"
                [cdkCopyToClipboard]="bg.backgroundImageObj.url"
                (click)="$event.stopPropagation()"
                (cdkCopyToClipboardCopied)="onCopyToClipboardCopied($event)">
                <mat-icon>content_copy</mat-icon>
            </button>
        </div>
    </div>

    <div class="text-xs my-2 flex justify-between items-center">
        <span>
            {{ 'PAC.Story.CustomImages' | translate: {Default: 'Custom Images'} }}
        </span>

        <button (click)="toggleCustomImages()">
            <svg data-accordion-icon class="w-6 h-6 shrink-0" 
                [class.rotate-180]="showCustomImages"
                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
    </div>

    <div class="grid grid-cols-3 gap-1 w-full max-h-80 overflow-auto relative" [@listAnimation]="customImages?.length">
        <mat-spinner *ngIf="loadingCustomImages" class="absolute inset-0 m-auto" diameter="30"></mat-spinner>

        <div *ngFor="let bg of customImages" class="pac-image-tile relative h-20 cursor-pointer bg-contain bg-no-repeat bg-center transition-colors
            m-2 rounded-lg outline outline-2 outline-offset-2 outline-transparent
            hover:bg-slate-200 dark:hover:bg-slate-800
            group"
            [class.active]="bg.url===backgroundImageUrl"
            [style.background-image]="'url(' + bg.url + ')'"
            (click)="onBackgroundImageSelected({backgroundImageObj: bg})"
        >
            <button mat-icon-button class="pac-image-tile__copy absolute top-0 right-0 opacity-0 group-hover:opacity-100" displayDensity="compact"
                [cdkCopyToClipboard]="bg.url"
                (click)="$event.stopPropagation()"
                (cdkCopyToClipboardCopied)="onCopyToClipboardCopied($event)">
                <mat-icon>content_copy</mat-icon>
            </button>
        </div>
    </div>
</div>

<ngm-input class="w-full" 
    [label]=" 'PAC.Story.BackgroundSize' | translate: {Default: 'Bg.Size'} "
    [placeholder]=" 'background-size' "
    [formControl]="backgroundSize"
    [options]="[
        {
            value: 'cover',
            label: 'Cover'
        },
        {
            value: 'contain',
            label: 'Contain'
        },
        {
            value: '100% 100%',
            label: '100% 100%'
        },
    ]"
    >
</ngm-input>
<ngm-input class="w-full" 
    [label]=" 'PAC.Story.BackgroundRepeat' | translate: {Default: 'Bg.Repeat'} "
    [placeholder]=" 'background-repeat' "
    [formControl]="backgroundRepeat"
    [options]="[
        {
            value: 'repeat',
            label: 'Repeat'
        },
        {
            value: 'repeat-x',
            label: 'Repeat X'
        },
        {
            value: 'space',
            label: 'Space'
        },
        {
            value: 'round',
            label: 'Round'
        },
        {
            value: 'no-repeat',
            label: 'No Repeat'
        },
        {
            value: 'space repeat',
            label: 'Space Repeat'
        }
    ]"
    >
</ngm-input>
<ngm-input class="w-full" 
    [label]=" 'PAC.Story.BackdropFilter' | translate: {Default: 'Backdrop Filter'} "
    [placeholder]=" 'backdrop-filter' "
    [formControl]="backdropFilter"
    [options]="backdropOptions"
    >
</ngm-input>

<pac-color-input class="w-full my-2" [label]=" 'PAC.Story.Border' | translate: {Default: 'Border'} "
    [formControl]="borderColor"
    [default]="'transparent'">
</pac-color-input>

<ngm-slider-input *ngIf="hasBorderColor" class="w-full"
    [(ngModel)]="borderWidth"
    [label]=" 'PAC.Story.BorderWidth' | translate: {Default: 'Border Width'} "
    [min]="0"
    [max]="100"
    >
</ngm-slider-input>

<div *ngIf="hasBorderColor" class="flex justify-start items-center gap-2 my-2">
    <label for="widget-background-color" class="w-1/3 shrink-0 block tracking-wide text-xs text-right">
        {{ 'PAC.Story.BorderStyle' | translate: {Default: 'Border Style'} }}
    </label>

    <div class="w-2/3 flex justify-start items-center">
        <mat-button-toggle-group name="borderStyle" [formControl]="borderStyle" ngmAppearance="outline" displayDensity="compact" color="accent">
            <mat-button-toggle value="solid">
                solid
            </mat-button-toggle>
            <mat-button-toggle value="dashed">
                dashed
            </mat-button-toggle>
            <mat-button-toggle value="dotted">
                dotted
            </mat-button-toggle>
        </mat-button-toggle-group>
    </div>
</div>

<div *ngIf="hasBorderColor" class="flex justify-start items-start gap-2 my-2">
    <label for="widget-background-color" class="w-1/3 shrink-0 block tracking-wide text-xs text-right">
        <mat-checkbox labelPosition="before" [ngModel]="enableBorderImage" (ngModelChange)="onBorderImage($event)">
            {{ 'PAC.Story.BorderImage' | translate: {Default: 'Border Image'} }}
        </mat-checkbox>
    </label>

    <div *ngIf="enableBorderImage" class="w-full flex flex-col">
        <div class="h-60 bg-slate-50 flex flex-col justify-center items-center"
            [ngStyle]="{
                'border-radius': borderRadius + 'px',
                'border-width': borderWidth + 'px',
                'border-color': borderColor,
                'border-style': 'solid',
                'border-image': 'url(' + borderImageUrl + ')' + ' ' + borderImageSlice
            }"
        >
            <input #fileUpload type="file" class="file-input h-0 w-0 invisible" accept="image/*" (change)="onBorderFile($event)" (click)="fileUpload.value=null;">
            <button mat-stroked-button ngmAppearance="dashed" displayDensity="cosy" color="accent" class="backdrop-blur-md"
                (click)="fileUpload.click()">
                <div class="flex justify-start items-center">
                <mat-icon fontSet="material-icons-round">upload</mat-icon>
                {{ 'Story.Common.Upload' | translate: {Default: "Upload"} }}
                </div>
            </button>
        </div>

        <div class="w-full flex flex-col">
            <div class="flex justify-between items-center">
                <label class="text-xs">
                    {{ 'PAC.Story.PresetImages' | translate: {Default: 'Preset Images'} }}
                </label>

                <button (click)="togglePresetBorderImages()">
                    <svg data-accordion-icon class="w-6 h-6 shrink-0" 
                        [class.rotate-180]="!!borderImages?.length"
                        fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                </button>
            </div>
    
            <div class="grid grid-cols-3 gap-1 py-2 max-h-80 overflow-auto relative" [@listAnimation]="borderImages?.length">
                <div *ngFor="let border of borderImages" class="pac-image-tile h-20 cursor-pointer
                    m-1 rounded-lg outline outline-2 outline-offset-2 outline-transparent"
                    [class.active]="border.borderImageObj.url===borderImageUrl"
                    [ngStyle]="{
                        'border-radius': borderRadius + 'px',
                        'border-width': border.borderWidth + 'px',
                        'border-color': borderColor,
                        'border-style': 'solid',
                        'border-image': 'url(' + border.borderImageObj.url + ')',
                        'border-image-slice': border.borderImageSlice
                    }"
                    (click)="onBorderImageSelected(border)"
                >
                </div>
            </div>

            <div class="flex justify-between items-center">
                <label class="text-xs">
                    {{ 'PAC.Story.CustomImages' | translate: {Default: 'Custom Images'} }}
                </label>

                <button (click)="toggleBorderImages()">
                    <svg data-accordion-icon class="w-6 h-6 shrink-0" 
                        [class.rotate-180]="!!customBorderImages?.length"
                        fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                </button>
            </div>

            <div class="grid grid-cols-3 gap-1 py-2 max-h-80 overflow-auto relative" [@listAnimation]="customBorderImages?.length">
                <mat-spinner *ngIf="loadingCustomImages" class="absolute inset-0 m-auto" diameter="30"></mat-spinner>
                <div *ngFor="let border of customBorderImages" class="pac-image-tile h-20 cursor-pointer
                    m-1 rounded-lg outline outline-2 outline-offset-2 outline-transparent"
                    [class.active]="border.url===borderImageUrl"
                    [ngStyle]="{
                        'border-radius': borderRadius + 'px',
                        'border-width': (borderWidth || 20) + 'px',
                        'border-color': borderColor,
                        'border-style': 'solid',
                        'border-image': 'url(' + border.url + ')',
                        'border-image-slice': borderImageSlice
                    }"
                    (click)="onBorderImageSelected({borderImageObj: border})"
                >
                </div>
            </div>
        </div>
    </div>
    
</div>

<ngm-slider-input *ngIf="hasBorderColor && enableBorderImage" class="w-full my-2"
    [label]=" 'PAC.Story.BorderImageSlice' | translate: {Default: 'Border Image Slice'} "
    [(ngModel)]="borderImageSlice"
    [min]="0"
    [max]="100"
    >
</ngm-slider-input>

<ngm-input *ngIf="!shadowColor.value" class="w-full" 
    [label]=" 'PAC.Story.BoxShadow' | translate: {Default: 'Box Shadow'} "
    [placeholder]=" 'box-shadow' "
    [formControl]="boxShadow"
    >
</ngm-input>
<pac-color-input [label]=" 'PAC.Story.Shadow' | translate: {Default: 'Shadow'} "
    [formControl]="shadowColor" class="w-full my-2">
</pac-color-input>
<ngm-slider-input *ngIf="shadowColor.value" class="w-full"
    [label]=" 'PAC.Story.ShadowOffsetX' | translate: {Default: 'OffsetX'} "
    [formControl]="shadowOffsetX" [min]="-200" [max]="200">
</ngm-slider-input>
<ngm-slider-input *ngIf="shadowColor.value" class="w-full"
    [label]=" 'PAC.Story.ShadowOffsetY' | translate: {Default: 'OffsetY'} " 
    [formControl]="shadowOffsetY" [min]="-200" [max]="200">
</ngm-slider-input>
<ngm-slider-input *ngIf="shadowColor.value" class="w-full"
    [label]=" 'PAC.Story.ShadowBlur' | translate: {Default: 'Blur'} "
    [formControl]="shadowBlur" label="Blur" [min]="0" [max]="300">
</ngm-slider-input>
<ngm-slider-input *ngIf="shadowColor.value" class="w-full"
    [label]=" 'PAC.Story.ShadowSpread' | translate: {Default: 'Spread'} "
    [formControl]="shadowSpread" [min]="-200" [max]="200">
</ngm-slider-input>

<ngm-input class="w-full" 
    [label]=" 'PAC.Story.Transform' | translate: {Default: 'Transform'} "
    [placeholder]=" 'transform' "
    [formControl]="transform">
</ngm-input>
<ngm-input class="w-full" 
    [label]=" 'PAC.Story.TransformOrigin' | translate: {Default: 'Transform Origin'} "
    [placeholder]=" 'transform-origin' "
    [formControl]="transformOrigin">
</ngm-input>

<ngm-input class="w-full" 
    [label]=" 'PAC.Story.Filter' | translate: {Default: 'Filter'} "
    [placeholder]=" 'filter' "
    [formControl]="filter"
    [options]="filterOptions"
    >
</ngm-input>

<ngm-slider-input [label]=" 'PAC.Story.Opacity' | translate: {Default: 'Opacity'} " class="w-full"
    [formControl]="opacity"
    [min]="0"
    [max]="1"
    [step]="0.1"
    >
</ngm-slider-input>

<pac-designer-text
    [formControl]="textFormControl"
/>